<template>
  <div class="box">
    <p>新用户注册</p>
    <p><b>很高兴您将成为商城的会员（注册只需一步）</b></p>
    <input type="text" name="" id="" placeholder="请输入用户名" /><br />
    <input type="password" name="" id="" placeholder="请输入密码" /><br />
    <div>
      <input
        type="text"
        placeholder="请输入图片验证码"
        @blur="bt"
        v-model="tuyan"
      />
      <span>{{ code }}</span>
    </div>
    <input
      type="text"
      v-model="info"
      name=""
      id=""
      placeholder="请输入手机号"
    /><br />
    <!-- 19883131147 -->
    <div>
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary" @click="getcode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
    </div>
    <button class="b1" @click="btn">立即注册</button>
    <p class="p1" @click="gologin">已有账号？ 立即登录</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tuyan: "",
      info: "",
      sms: "",
      code: "",
      hu:""
    };
  },
  mounted() {
    this.suiji_shu();
  },
  methods: {
    bt() {
        this.$API.getpicture({ key: this.code }).then((res) => {
            console.log(res);
          console.log(res.config.params.key);
          this.hu=res.config.params.key
        });
    },
    gologin() {
      this.$router.push("/login");
    },
    getcode() {
      this.$API.getinfo({ mobile: this.info, key: this.hu }).then((res) => {
        console.log(res);
      });
    },
    btn() {},

    suiji_shu() {
      var s = "";
      var quzhi = function () {
        var n = Math.floor(Math.random() * 62);
        if (n < 10) return n; //1-10
        if (n < 36) return String.fromCharCode(n + 55); //A-Z
        return String.fromCharCode(n + 61); //a-z
      };
      while (s.length < 4) s += quzhi();

      this.code = s;
      //   console.log(this.code);
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
input {
  margin: 0.5rem 0;
}
.p1 {
  color: rgb(98, 152, 197);
}
</style>